<!--权限配置 功能集-->
<template>
  <div class="permissions-setting">
    <el-form label-width="80px">
      <div class="permission-body">
        <div class="warpper"
          v-for="(item, index) in roleAuthorization"
          :key="item.id">
          <div class="warpper-body">
            <div class="warpper-left">
              <el-checkbox :label="item.funcName"
                name="type"
                v-model="item.selected"
                @change="selectedAll(item.selected, index)">{{item.funcName}}</el-checkbox>
            </div>
            <div class="warpper-middel">
              <div class="middel-child"
                v-for="value in item.children"
                :key="value.id">
                <div class="middel">
                  <el-checkbox-group v-model="value.selected"
                    @change="childrenSelectAll(value.selected, index, value)">
                    <el-checkbox :label="value.funcName"
                      name="type"></el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="child-warpper">
                  <div class="child"
                    v-for="key in value.children"
                    :key="key.id">
                    <el-checkbox-group v-model="key.selected">
                      <el-checkbox :label="key.funcName"
                        name="type"
                        @change="childSelect(key.selected, index, value)"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <div class="handler-btns">
      <el-button size="small"
        type="primary"
        @click="_sure"
        v-has="'setrolefunc'"
        >
        确定
      </el-button>
      <el-button size="small"
        @click="_cancel">
        取消
      </el-button>
    </div>
  </div>
</template>
<script>
import { getRoleTheFunclist, setRoleTheFunclist } from "@/public/js/setting";
export default {
  components: {},
  props: ["roleId","systemId"],
  data() {
    return {
      roleAuthorization: [],
      funcList: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    _getRoleTheFunclist() {
      getRoleTheFunclist({
        roleId: this.roleId,
        systemId: this.systemId
      }).then(res => {
        if (!res.data.errCode) {
          this.roleAuthorization = res.data.roleFuncEntities;
          console.log( JSON.stringify(this.roleAuthorization))
        }
      });
    },
    _getSelectedId(item) {
      if (item.selected) {
        this.funcList.push(item.id);
        if (item.children.length) {
          item.children.forEach(item => {
            this._getSelectedId(item);
          });
        }
      }
    },
    _sure() {
      this.funcList = [];
      this.roleAuthorization.forEach(item => {
        this._getSelectedId(item)
      });
      setRoleTheFunclist({
        roleId:this.roleId,
        funcList: this.funcList
      }).then(res=>{
        if (!res.data.errCode) {
          this.$message({
            type:'success',
            message:'修改成功'
          })
        }
         this.$parent.hide();
      })
    },
    _cancel() {
      this.$parent.hide();
    },
    selectedAll(bollean, index) {
      this.roleAuthorization[index].children.forEach(item => {
        item.selected = bollean;
        item.children.forEach(i => {
          i.selected = bollean;
        });
      });
    },
    childrenSelectAll(bollean, index, value) {
      value.children.forEach(item => {
        item.selected = bollean;
      });
      let flag = false;
      this.roleAuthorization[index].children.forEach(item => {
        if (item.selected) {
          flag = true;
        }
      });
      this.roleAuthorization[index].selected = flag;
    },
    childSelect(bollean, index, value) {
      let flag = false;
      let flag1 = false;
      value.children.forEach(item => {
        if (item.selected) {
          flag = true;
        }
      });
      value.selected = flag;
      this.roleAuthorization[index].children.forEach(item => {
        if (item.selected) {
          flag1 = true;
        }
      });
      this.roleAuthorization[index].selected = flag1;
    }
  },
  created() {
    this._getRoleTheFunclist();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.permission-body {
  background: #eef1f9;
  box-sizing: border-box;
  .warpper {
    overflow: hidden;
    line-height: 30px;
    &:last-child {
      .warpper-body {
        border: none;
      }
    }
    .warpper-body {
      overflow: hidden;
      display: flex;
      line-height: 28px;
      margin-bottom: 2px;
      border-bottom: 1px solid #ddd;
      .warpper-left {
        width: 150px;
        padding-left: 10px;
        border-right: 1px solid #ddd;
        display: flex;
        align-items: center;
      }
      .warpper-middel {
        overflow: hidden;
        line-height: 3.4;
        .middel-child {
          display: flex;
          text-align: left;
          padding-left: 20px;
          border-bottom: 1px solid #ddd;
          box-sizing: border-box;

          &:last-child {
            border: none;
          }
          .middel {
            width: 200px;
            border-right: 1px solid #ddd;
            display: flex;
            align-items: center;
            box-sizing: border-box;
          }
          .child-warpper {
            width: 100%;
            flex: 1;
            padding-left: 20px;
            .child {
              float: left;
              padding-right: 20px;
            }
          }
        }
      }
    }
  }
}
.handler-btns {
  padding-top: 30px;
  text-align: center;
}
</style>